<template>
  <svg
    class="bg-svg"
    viewBox="0 0 1440 900"
    preserveAspectRatio="xMidYMid slice"
    xmlns="http://www.w3.org/2000/svg"
  >
    <defs>
      <!-- 动态渐变 -->
      <linearGradient id="mainGradient" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%">
          <animate attributeName="stop-color"
            values="#ff9a9e; #ffc3a0; #ff9a9e"
            dur="12s" repeatCount="indefinite" />
        </stop>

        <stop offset="50%">
          <animate attributeName="stop-color"
            values="#c7f2ff; #d0e7ff; #c7f2ff"
            dur="10s" repeatCount="indefinite" />
        </stop>

        <stop offset="100%">
          <animate attributeName="stop-color"
            values="#4dd0b9; #6ee6cf; #4dd0b9"
            dur="14s" repeatCount="indefinite" />
        </stop>
      </linearGradient>

      <!-- 模糊增强曲线 -->
      <filter id="edgeBlur">
        <feGaussianBlur stdDeviation="45" />
      </filter>

      <!-- 你原来的遮罩（无改动） -->
      <mask id="edgeMask">
        <rect width="1440" height="900" fill="white" />

        <path
          d="M0,260
           C240,220 480,260 480,260
           C800,320 1100,200 1440,260"
          stroke="black"
          stroke-width="160"
          filter="url(#edgeBlur)"
        />

        <path
          d="M0,640
           C180,580 420,660 540,680
           C860,740 1180,660 1440,720"
          stroke="black"
          stroke-width="160"
          filter="url(#edgeBlur)"
        />
      </mask>
    </defs>

    <!-- 主背景 -->
    <rect width="1440" height="900" fill="url(#mainGradient)">
      <!-- 大面积轻微上下浮动 -->
      <animateTransform
        attributeName="transform"
        type="translate"
        dur="18s"
        values="0 -20; 0 20; 0 -20"
        repeatCount="indefinite"
      />
    </rect>

    <!-- 曲线区域再次叠加，让分层感更强 -->
    <rect
      width="1440"
      height="900"
      fill="url(#mainGradient)"
      mask="url(#edgeMask)"
      opacity="0.45"
    >
      <!-- 同步漂浮（更自然） -->
      <animateTransform
        attributeName="transform"
        type="translate"
        dur="22s"
        values="0 25; 0 -25; 0 25"
        repeatCount="indefinite"
      />
    </rect>
  </svg>
</template>

<style scoped>
.bg-svg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
</style>
